{extend name="layout/base"}
{block name="title"}分类列表{/block}
{block name="main"}
<div class="right-main">
    <div class="mdui-card border-1 mdui-shadow-0 mdui-m-b-2 ">
        <div class="mdui-card-primary">
            <div class="mdui-toolbar mdui-p-a-0">
                <a href="/admin/cate/create"><button class="mdui-btn border-1">添加分类</button></a>
                <div class="mdui-toolbar-spacer"></div>
                <div class="mdui-textfield">
                    <i class="mdui-icon material-icons">search</i>
                    <input class="mdui-textfield-input" type="email" placeholder="search"/>
                </div>
                <button class="mdui-btn border-1">搜索</button>
                <button class="mdui-btn border-1">刷新</button>
            </div>
        </div>
        <div class="mdui-divider "></div>
        <div class="mdui-table-fluid mdui-m-t-1 mdui-m-a-1 mdui-shadow-0 ">
            <table class="mdui-table mdui-table-hoverable layui-form">
                <thead>
                <tr>
                    <th>#</th>
                    <th>排序</th>
                    <th>文章数量</th>
                    <th>名称</th>
                    <th>状态</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {foreach $categorys as $key=>$vo }
                <tr>
                    <td>{$vo.id}</td>
                    <td><input onblur="updateSort({$vo.id},this.value)" type="text" style="width: .9em" value="{$vo.sort}"
                               name="" id="" class="mdui-textfield-input"></td>
                    <td>{$vo.article|count}</td>
                    <td>{$vo.name}</td>
                    <td><input data-id="{$vo.id}" lay-filter="state" type="checkbox" {if $vo.state eq 1} checked {/if}
                        lay-text="开启|关闭" lay-skin="switch">
                    </td>
                    <td>{$vo.create_time}</td>
                    <td>
                        <a href="/admin/cate/{$vo.id}/edit" class="link"><i class="mdui-icon material-icons">&#xe3c9;</i></a>
                        |
                        <a  href="javascript:;" onclick="deleteCate({$vo.id})"><i class="mdui-icon material-icons">&#xe872;</i></a>
                    </td>
                </tr>
                {/foreach}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="mws-panel-content">
    <div class="list-page">
        {$categorys|raw}
    </div>
</div>
{/block}
{block name="script"}
<script>
    function deleteCate(id) {
        layer.alert('确认删除？删除后该栏目下的文章也会被删除', function (index) {
            $.post('/admin/cate/' + id, {_method: 'DELETE'}, res => {
                if (res.code === 1) {
                    layer.msg(res.msg, {icon: 6, time: 1500}, () => {
                        location.href = res.url
                    })
                } else {
                    layer.msg(res.msg, {icon: 5, time: 1500}, () => {
                        location.href = res.url
                    })
                }
            })
            layer.close(index);
        });
        return false;
    }

    function updateSort(id, value) {
        $.post('/admin/cate/up_sort/' + id, {sort: value}, res => {
            if (res.code === 1) layer.msg(res.msg, {icon: 6, time: 900, anim: 2}, () => {
                location.href = res.url
            })
            else layer.msg(res.msg, {icon: 5, time: 1000, anim: 6})
        })
    }

    layui.use('form', function () {
        const form = layui.form, layer = layui.layer, $ = layui.jquery;

        form.on('switch(state)', function (data) {
            const id = $(data.elem).attr("data-id");
            const value = $(data.elem).attr("value") === '1' ? 0 : 1;
            $.post('/admin/cate/up_state/' + id, {status: value}, res => {
                if (res.code === 1) layer.msg(res.msg, {icon: 6, time: 900, anim: 2})
                else layer.msg(res.msg, {icon: 5, time: 1000, anim: 6})
            })
        });
    });


</script>
{/block}